<template>
  <div>
    <template v-if="!showError">
      <div id="vline" class="wrapper" v-loading="loading"></div>
      <div class="radio-group">
        <el-radio-group v-model="time" @change="timeChange">
          <el-radio-button :label="0">1小时</el-radio-button>
          <el-radio-button :label="1">6小时</el-radio-button>
          <el-radio-button :label="2">1天</el-radio-button>
        </el-radio-group>
      </div>
    </template>
    <out-of-service :note="outNote" v-if="showError"></out-of-service>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts/lib/echarts' // 引入基本模板
import 'echarts/lib/chart/line' // 引入折线图组件
import 'echarts/lib/component/tooltip' // 引入提示框和图例组件
import 'echarts/lib/component/legend'
import OutOfService from '@/components/outOfService.vue'
export default {
  components: {
    OutOfService
  },
  props: {
    hostId: {
      type: String
    },
    status: {
      type: Number
    }
  },
  data() {
    return {
      time: 0,
      showError: false,
      outNote: '暂无图表',
      loading: true
    }
  },
  computed: {
    ...mapState({
      ioInput: state => state.hostList.ioInput,
      ioOutput: state => state.hostList.ioOutput,
      ioTime: state => state.hostList.ioTime
    })
  },
  methods: {
    timeChange() {
      this.loadNetworkData()
    },
    loadNetworkData() {
      this.loading = true
      this.showError = false
      this.$store
        .dispatch('getNetworkData', { hostId: this.hostId, time: this.time, status: this.status })
        .then(_ => {
          this.init()
          this.loading = false
        })
        .catch(error => {
          this.loading = false
          this.showError = true
          this.$message.error(error.errorMessage)
        })
    },
    init() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        color: ['#337DFF', '#10C038'],
        legend: {
          data: ['Input', 'Output'],
          selectedMode: false,
          testStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#555555',
            fontSize: 12
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          // left: '2%',
          // right: '2%',
          // bottom: '3%',
          left: 40,
          top: 45,
          bottom: 0,
          x: 25,
          x2: 25,
          y: 60,
          y2: 60,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.ioTime,
            axisLabel: {
              color: '#999999',
              fontSize: 12
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 2
              }
            },
            axisTick: {
              length: 8
            }
          }
        ],
        yAxis: [
          {
            name: '网络IO监控 (KB/s)',
            type: 'value',
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#999999',
              fontSize: 12
            },
            axisLine: {
              show: false //y轴
            },
            axisTick: {
              show: false //y轴刻度线
            }
          }
        ],
        series: [
          {
            name: 'Input',
            type: 'line',
            stack: 'Input',
            symbol: 'none',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(51, 125, 255, 0.1)'
                },
                {
                  offset: 1,
                  color: 'rgba(51, 125, 255, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#337DFF'
                }
              }
            },
            data: this.ioInput
          },
          {
            name: 'Output',
            type: 'line',
            stack: 'Output',
            symbol: 'none',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(16, 192, 56, 0.1)'
                },
                {
                  offset: 1,
                  color: 'rgba(16, 192, 56, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#10C038'
                }
              }
            },
            data: this.ioOutput
          }
        ]
      }
      //初始化图表
      const chartObj = echarts.init(document.getElementById('vline'))
      chartObj.setOption(option)
    }
  },
  created() {},
  mounted() {
    this.loadNetworkData()
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: 230px;
}
.radio-group {
  position: absolute;
  top: 0;
  right: 20px;
}
</style>
